<template>
  <div>
    <el-row class="demo-autocomplete">
      <el-select filterable placeholder="学科" value="计算机" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
      
      </el-select>
      <el-button type="primary" @click="search">查找</el-button>
    </el-row>
     <el-card class="box-card" v-for="(item,index) in tests" :key="index"> 
      <div slot="header" class="clearfix">
        <span>考试详情</span>
        <el-tag size="small" :type='item.examState==2? "danger":(item.examState==1? "success":"info")'>{{statusname(item.examState)}}</el-tag>
        <el-button style="float: right; padding: 3px 0" type="text" @click="edittest(item)">考试监考</el-button>
      </div>
      <div class="text item">
        考试名称：{{item.examName}}
      </div>
      <div class="text item">
        开始考试：{{item.examTime}}
      </div>
      <div class="text item">
        结束考试：{{item.endTime}}
      </div>
      <div class="text item">
        考试时长：{{item.time}} 分钟
      </div>
      <div class="text item">
        考试地址：{{item.examAddress}}
      </div>
      <div class="text item">
        考试人数：{{item.classNumber}}
      </div>
     </el-card>
     <el-dialog
       title="考试编辑"
       :visible.sync="centerDialogVisible"
       width="50%"
       center>
      考试时间：<el-input v-model="input.time" placeholder="请输入内容"></el-input>
      考试地址：<el-input v-model="input.address" placeholder="请输入内容"></el-input>
      考试人数：<el-input v-model="input.number" placeholder="请输入内容"></el-input>
       <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmedit(editid)">确 定</el-button>
       </span>
     </el-dialog>
  </div>
</template>

<script>
import {mapState} from 'vuex';
export default {
  data() {
    return {
      centerDialogVisible: false,
      editid:'',
      input:{
        time:'',
        address:'',
        number:'',
      },
    }
  },
  computed:{
    ...mapState({
      tests:state=>state.examMessages.exammessage.filter((element)=>element.examState==2)
    })
  },
  watch:{

  },
  mounted() {
     this.$store.dispatch('getexamMsg')
  },
  methods: {
    statusname(status){
      if(status==1){
        return '待考';
      }
      else if(status==2){
        return '考试中';
      }
      else {
        return '考试结束';
      }
    },
    edittest({examTime,classId,examId,examState}){//解构
      if(examState==3){
        this.$message({
            type: 'info',
            message: '考试已结束!不允许操作'
          });
        return;
      }
       else if(examState==1){
        this.centerDialogVisible=true;
        this.editid=examId;//试卷标识
      }
      else {
        this.$router.push({
          name:'mainInvigilate',
          query:{
            examId,//考试id
            classId,//根据班级id获取学生
            examTime//开始考试时间，默认以发布考试开始
          }
        });
      }
    },
    search(){
    },
    confirmedit(editid){
      console.log(editid);
      this.centerDialogVisible=false;
      this.tests.forEach((element,index) => {
        console.log(element)
        if(element.examId==editid){
          element.time= this.input.time;
          element.examAddress=this.input.address;
          element.classNumber=this.input.number;
        }
      });
    }
  }
}
</script>

<style>
.el-select{
  margin: 0 10px;
}
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 280px;
    display: inline-block;
    margin: 5px 10px;
  }
</style>
